import React from 'react'
import styles from '@/assets/css/index.module.css';
import { sleep } from 'antd-mobile/es/utils/sleep'
import Menu from '@/views/common/menu'

export default () =>
{
    const [keywords, SetKeywords] = React.useState('');
    const [hasMore, SethasMore] = React.useState(false)
    const [page, SetPage] = useState(1)
    const [coupon, SetCoupon] = useState([])
    const [list, SetList] = useState([])

    //钩子函数
    React.useEffect(() => {
        //获取优惠券、房间信息
        GetCouponData()
        GetHotelData()
    }, [])

    //优惠券
    const GetCouponData = async () =>
    {
        var result = await React.request.post('/coupon/CouponIndex')

        if(result.code == 1)
        {
            SetCoupon(result.data)
        }
    }

    //房间数据请求
    const GetHotelData = async () => 
    {
        let result = await React.request.post('/room/RoomIndex', {keywords, page})
        
        if(result.code == 0)
        {
            SethasMore(false)
            return false
        }

        //设置分页和列表
        SethasMore(true)
        SetPage(page + 1)
        SetList(list.concat(result.data))
    }

    // 下拉刷新
    const OnRefresh = async () => 
    {
        SetPage(1)
        SetList([])
        SethasMore(true)

        await sleep(500)
        await GetHotelData()
    }

    //上拉加载
    const LoadMore = async () => 
    {
        await sleep(500)
        GetHotelData()
    }

    //关键词请求
    const handleSearch = async (val:string) => 
    {
        SetKeywords(val)
        await OnRefresh();
    }

    const SwiperCoupon = () => 
    {
        if(coupon.length <= 0)
        {
            return (<></>)
        }

        return (
            <div className={styles.heaerd}>
                <React.UI.Swiper loop autoplay>
                    {coupon.map((item:any, key:number) => (
                        <React.UI.Swiper.Item key={key}>
                            <Link to={`/coupon/info?cid=${item.id}`}>
                                <React.UI.Image src={item.thumb_text} height={213} fit='cover' />
                            </Link>
                        </React.UI.Swiper.Item>
                    ))}
                </React.UI.Swiper>
            </div>
        )
    }

    return (
        <>
            <SwiperCoupon />

            <div className={styles.hotel_search}>
                <React.UI.Input value={keywords} onChange={(val:string) => handleSearch(val)} clearable placeholder="请输入关键词搜索" />
            </div>

            <div className={styles.hotellist}>
                {/* 下拉刷新 */}
                <React.UI.PullToRefresh onRefresh={OnRefresh}>
                    {list.map((item:any) => (
                        <div className={styles.item} key={item.id}>
                            <Link to={`/room/info?roomid=${item.id}`}>
                                <div className={styles.images}>
                                    <div className={styles.swipers}>
                                        <img src={item.thumb_text} alt="" />
                                    </div>
                                    <div className={styles.title}>{item.name}</div>
                                </div>

                                <div>
                                    <div className={styles.item_top}>
                                        {item.flag_text.map((flag:string, index:number)=>(
                                            <span key={index}>{flag}</span>
                                        ))}
                                    </div>

                                    <div className={styles.item_bot}>
                                        <div className={styles.font}>
                                            <span className={styles.price}>￥{item.price}/晚</span>
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        </div>
                    ))}
                    

                    {/* 上拉加载 */}
                    <React.UI.InfiniteScroll loadMore={LoadMore} hasMore={hasMore} threshold={0} />
                </React.UI.PullToRefresh>
            </div>
            
            {/* 底部 */}
            <div className={styles.footer}>
                <Menu />
            </div>
        </>
    )
}